<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="30">
      <a-col :span="12">
        <a-form-item label="姓名(name):" name="name">
          <a-input v-model:value="form.name" allow-clear placeholder="请输入名称" />
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item label="类型(type):" name="samplesType">
          <a-select v-model:value="form.samplesType">
            <a-select-option value="film">薄膜(film)</a-select-option>
            <a-select-option value="device">器件(device)</a-select-option>
            <a-select-option value="solution">溶液(solution)</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="日期(date):" name="date">
          <a-date-picker v-model:value="form.date" value-format="YYYY-MM-DD" style="width: 100%" placeholder="请选择日期" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="时间(time):" name="time">
          <a-time-picker v-model:value="form.time" value-format="HH:mm:ss" style="width: 100%" placeholder="请选择时间" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="keywords:" name="samplesKeywords">
          <a-input v-model:value="form.samplesKeywords" allow-clear placeholder="请输入keywords" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="样本数量(samplesAmount):" name="samplesAmount">
          <a-input-number v-model:value="form.samplesAmount" :min="0" style="width: 100%" placeholder="请输入样本数量"
            allow-clear autocomplete="off" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-button type="primary" class="border-radius" @click="addStorageLocation"><plus-outlined /> 添加存储位置</a-button>
      </a-col>
      <a-col :span="24" class="marginT10">
        <vxe-table border show-overflow :data="form.storageLocationList" :row-config="{ useKey: true }"
          :edit-rules="validRules" :column-config="{ resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }" max-height="600" ref="xTableRef">
          <vxe-column type="seq" width="60" title="序号" align="center"></vxe-column>

          <vxe-column field="orgName" title="存储位置" align="center">
            <template #default="{ row, rowIndex }">
              <div style="display: flex;    align-items: center">

                NO.<vxe-input v-model="row.n1" type="number" style="width:80px;" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <vxe-input v-model="row.n2" :min="0" :max="12" type="number" style="width:50px;" /> &nbsp;-&nbsp;
                <vxe-input v-model="row.n3" :min="0" :max="12" type="number" style="width:50px;" />
              </div>

            </template>
          </vxe-column>

          <vxe-column title="操作" width="100" align="center">
            <template #default="{ row }">
              <icon-font iconClass="icon-opt-shanchu" color="#60666b" font-size="24px"
                @click="removeOrg(row)"></icon-font>
            </template>
          </vxe-column>
        </vxe-table>
      </a-col>
      <!-- <a-col :span="12">
        <a-form-item label="存储位置(storageLocation):" name="storageLocation">
          <div style="display: flex;align-items: center">
            NO. 
            <a-input-number v-model:value="form.storageLocation1"/>  &nbsp;&nbsp;
            <a-input-number :min="1" :max="12" v-model:value="form.storageLocation2"/>
             - 
            <a-input-number :min="1" :max="12" v-model:value="form.storageLocation3"/></div>
          
        </a-form-item>
      </a-col> -->
      <a-col :span="24">
        <a-form-item label="条件(condition):" name="condition">
          <a-textarea v-model:value="form.conditionText" placeholder="请输入条件" :rows="4" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="文件地址(fileAddress):" name="fileAddress">
          <a-input v-model:value="form.fileAddress" allow-clear placeholder="请输入文件地址" />
        </a-form-item>
      </a-col>
    </a-row>

  </a-form>
</template>

<script setup name="SampleDataForm">
import { number } from 'echarts';
import { reactive, ref } from 'vue';
import { VXETable } from 'vxe-table';
const props = defineProps({
  // 表单数据
  form: Object,
});


// 验证规则
const rules = reactive({
  name: [{ required: true, message: '请输入名称', type: 'string', trigger: 'blur' }],
  date: [{ required: true, message: '请选择日期', type: 'string', trigger: 'blur' }],
  time: [{ required: true, message: '请选择时间', type: 'string', trigger: 'blur' }],
  samplesType: [{ required: true, message: '请输入结构', type: 'string', trigger: 'blur' }],
  samplesKeywords: [{ required: true, message: '请输入keywords', type: 'string', trigger: 'blur' }],
  samplesAmount: [{ required: true, message: '请输入样本数量', type: 'number', trigger: 'blur' }],
  // storageLocation: [{ required: true, message: '请输入存储位置', type: 'string', trigger: 'blur' }],
  conditionText: [{ required: true, message: '请输入条件', type: 'string', trigger: 'blur' }],
  fileAddress: [{ required: true, message: '请输入文件地址', type: 'string', trigger: 'blur' }]
});

// ref
const xTableRef = ref(null);

// 验证事件
const validAllEvent = async () => {
  let flag = false;
  const $table = xTableRef.value;
  const errMap = await $table.validate(true);
  if (errMap) {
    flag = false;
  } else {
    flag = true;
  }
  console.log("表格验证结果", flag)
  return flag;
};

// 点击添加机构
const addStorageLocation = async () => {
  if (await validAllEvent()) {
    let obj = {
      // mainFlag: props.form.storageLocationList.length == 0 ? 'Y' : 'N',
      n1: 0,
      n2: 0,
      n3: 0,
      storageLocation:'',
      sampleDataId: 0
    };
    // obj.storageLocation = "NO."+obj.n1+" "+obj.n2+"-"+obj.n3
    props.form.storageLocationList.push(obj);
  }
};

// 删除机构
const removeOrg = async row => {
  // 删除当前行
  const type = await VXETable.modal.confirm('您确定要删除该数据?');
  if (type === 'confirm') {
    const $table = xTableRef.value;
    $table.remove(row);
  }
  const res = xTableRef.value.getTableData().tableData;
  props.form.storageLocationList = res;
};



</script>

<style>
.storageLocation-item {
  width: 30%;
}
</style>
